<template>
	<up-popup :show="show" mode="center" @close="show = false" :safeAreaInsetBottom="false">
		<view class="popup">
			<image class="popup-top-bj" src="@/static/image/popup-bj.png"></image>
			<view class="popup-content">
				<view class="title">
					发布
				</view>
				<view class="issue-content line-content">
					<view class="line">
						<view class="label">
							电话
						</view>
						<view class="value">
							{{data.order_phone}}
						</view>
					</view>
					<view class="line">
						<view class="label">
							起点
						</view>
						<view class="value">
							{{ address1.recommend }}
							<view class="desc">
								{{ address1.address }}
							</view>
						</view>
					</view>
					<view class="line">
						<view class="label">
							电话
						</view>
						<view class="value">
							{{ data.recipient_phone }}
						</view>
					</view>
					<view class="line">
						<view class="label">
							终点 
						</view>
						<view class="value">
							{{ address2.recommend }}
							<view class="desc">
								{{ address2.address }}
							</view>
						</view>
					</view>
					<view class="check">
						请仔细核对地址和电话
					</view>
				</view>
				<view class="popup-bottom">
					<view class="">
						<up-button @click="show = false" type="info" text="取消"></up-button>
					</view>
					<view class="">
						<up-button @click="handlePayClick" type="primary" text="去支付"></up-button>
					</view>
				</view>
			</view>
			<image class="close" mode="widthFix" @click="show = alse" src="@/static/image/close.png"></image>
		</view>
	</up-popup>
</template>

<script setup>
	import { ref } from 'vue'
	import utils from '@/utils/util.js'
	import trip from '@/api/trip.js'
	const props = defineProps({
		data: {
			type: Object,
			default: () => {}
		},
		address1: {
			type: Object,
			default: () => {}
		},
		address2: {
			type: Object,
			default: () => {}
		}
	})
	const show = ref(false)
	const handleClick = () => {
		show.value = true
	}
	defineExpose({
		handleClick
	})
	const handlePayClick = async () => {
		const { status, info, data } = await trip.placeOrder(props.data)
		utils.toast(info)
		if(status == 1) {
			show.value = false
		}
	}
</script>

<style lang="scss" scoped>
	.close {
		position: absolute;
		left: calc(50% - 29rpx);
		bottom: -90rpx;
		width: 58rpx;
	}
	.popup-content {
		.title {
			margin-bottom: 40rpx;
		}
		.issue-content {
			.line {
				.label {
					text-align: center;
				}
				.value {
					text-align: left;
				}
			}
			.check {
				margin: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #F88531;
				line-height: 33rpx;
			}
		}
	}
</style>